<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <body>

        <ui:composition template="./customerList.xhtml">

            <ui:define name="tabContent">
                <table border="0" cellspacing="5">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top">
                                <h:form>
                                    <p:panel>
                                        <h:panelGrid columns="2">
                                            Dịch vụ     
                                            <p:selectOneMenu value="#{serviceReportBean.selected.serviceName}" style="width: 150px">
                                                <f:selectItems value="#{serviceReportBean.serviceMap}"/>
                                            </p:selectOneMenu>

                                            Danh sách tham số
                                            <p:inputTextarea value="#{serviceReportBean.syntaxString}"/>

                                            Mạng
                                            <p:selectOneMenu value="#{serviceReportBean.selected.deliverProvider}" style="width: 150px">
                                                <f:selectItem itemLabel="Tất cả" itemValue="ALL"/>
                                                <f:selectItem itemLabel="Viettel" itemValue="smsgate_viettel6771"/>
                                                <f:selectItem itemLabel="Mobifone" itemValue="smsgate_mobifone6771"/>
                                                <f:selectItem itemLabel="Vinaphone" itemValue="smsgate_vinaphone6771"/>
                                            </p:selectOneMenu>

                                            Thời gian
                                            <p:selectOneRadio value="#{serviceReportBean.timeMode}">
                                                <f:selectItem itemLabel="Theo ngày" itemValue="byDay"/>
                                                <f:selectItem itemLabel="Theo tháng" itemValue="byMonth"/>
                                                <p:ajax event="change" update="timePanelSyntax"/>
                                            </p:selectOneRadio>
                                            
                                            <h:outputText/>
                                            <h:panelGrid id="timePanelSyntax" columns="1">
                                                <h:panelGrid id="byDaySyntax" rendered="#{serviceReportBean.timeMode == 'byDay'}" columns="2">
                                                    Thời gian bắt đầu
                                                    <p:calendar value="#{serviceReportBean.startDate}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                                                required="true" requiredMessage="Bạn chưa chọn ngày bắt đầu hiệu lực"/>
                                                    Thời gian kết thúc
                                                    <p:calendar value="#{serviceReportBean.endDate}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                                                required="true" requiredMessage="Bạn chưa chọn ngày hết hiệu lực"/>
                                                </h:panelGrid>

                                                <h:panelGrid id="byMonthSyntax" rendered="#{serviceReportBean.timeMode == 'byMonth'}" columns="2">
                                                    Ngày: 
                                                    <p:inputText id="dayStringSyntax" value="#{serviceReportBean.days}" style="width: 300px"/>
                                                    <p:watermark value="16/9,15/7,26/8" for="dayStringSyntax"/>
                                                </h:panelGrid>
                                                <p:selectBooleanCheckbox value="#{serviceReportBean.searchInAllDay}"/> Tìm trong tất cả các ngày
                                            </h:panelGrid>
                                            
                                            <h:outputText/>
                                            <p:commandButton value="Tìm kiếm" action="#{serviceReportBean.search()}" oncomplete="processingDialog.hide()"
                                                             onclick="processingDialog.show()" update="resultSyntax">
                                                <f:setPropertyActionListener target="#{serviceReportBean.searchMode}" value="byProvince"/>
                                            </p:commandButton>

                                        </h:panelGrid>
                                    </p:panel>
                                </h:form>
                            </td>
                            <td style="vertical-align: top">
                                <h:panelGrid id="resultSyntax" columns="1">
                                    <h:form>
                                        <p:scrollPanel style="width:250px;height:500px" rendered ="#{serviceReportBean.list != null and serviceReportBean.list.size() > 0}">
                                            <h:panelGrid id="result" columns="1">
                                                Tổng cộng: #{serviceReportBean.list.size()} số
                                                <c:forEach items="#{serviceReportBean.list}" var="item">
                                                    #{item}
                                                </c:forEach>
                                            </h:panelGrid>
                                        </p:scrollPanel>  
                                    </h:form>
                                </h:panelGrid>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ui:define>

        </ui:composition>

    </body>
</html>
